<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>新增培训试题</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--&lt;!&ndash; Font Awesome &ndash;&gt;-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--&lt;!&ndash; Ionicons &ndash;&gt;-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=39cd89cd">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=16f1e6f3">
    <script src="https://file.ggxqce.com/web/vue.min.js"></script>
    <style>
        ol, ul, li {
            list-style: none;
        }

        .question {
            margin: 12px 0;
            border-radius: 4px;
            background-color: #ffffff;
            border: 1px solid #f5f5f3;
            /*box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);*/
            position: relative;
            overflow: visible;
            color: #484848;
            text-align: left;
        }

        .question .q_content {
            padding: 18px 40px 18px 0px;
        }

        .question .q_content .q_title_wrap {
            position: relative;
            padding-left: 22px;
            min-width: 80%;
        }

        .question .q_content .q_title_wrap .q_seq {
            position: absolute;
            left: 10px;
            top: 6px;
            font-size: 15px;
            color: #484848;
            font-weight: bold;
        }

        .survey_main .content_editable {
            box-sizing: border-box;
            border-radius: 2px;
            border: solid 1px transparent;
            color: #484848;
        }

        .question .q_content .q_title_wrap .q_title {
            padding: 6px 10px;
            margin-left: 10px;
            font-size: 15px;
            width: 400px;

        }

        .question .q_content .q_option_ul {
            /*padding-right: 184px;*/
        }

        .question .q_content .q_option_ul > li {
            margin: 10px 0 0;
            padding: 3px 0 0 40px;
            position: relative;
            box-sizing: border-box;
            min-height: 24px;
        }

        .q_option_list {
            margin-top: 10px !important;
        }

        .question .q_content .q_option_list {
            margin: 6px 0 0 16px;
            padding-left: 30px;
        }

        .lookTitle {
            height: 20px;
            line-height: 20px;
            /* font-size: 20px; */
            font-weight: bold;
        }

        .survey_main .content_editable {
            box-sizing: border-box;
            border-radius: 2px;
            border: solid 1px transparent;
            color: #484848;
        }

        .question .q_content .icon_radio {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: solid 1px #aaaaaa;
            background-color: #ffffff;
            cursor: pointer;
            position: absolute;
            top: 4px;
            left: 8px;
        }

        .question .q_content .icon_check {
            width: 20px;
            height: 20px;
            border: solid 1px #aaaaaa;
            background-color: #ffffff;
            cursor: pointer;
            position: absolute;
            top: 4px;
            left: 8px;
        }

        .examT {
            width: 120px;
            height: 120px;
            background-image: url("/dist/img/examT.png");
            background-repeat: no-repeat;
            position: absolute;
            top: 50px;
            right: 160px;
        }

        .examF {
            width: 120px;
            height: 120px;
            background-image: url("/dist/img/examF.png");
            background-repeat: no-repeat;
            position: absolute;
            top: 50px;
            right: 160px;
        }

        .question .q_content .icon_active_radio {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            cursor: pointer;
            border: solid 1px #aaaaaa;
            /*background-color: #0076FF;*/
            background: url("/dist/img/duigou2.png") -2px center no-repeat;

            position: absolute;
            top: 6px;
            left: 8px;
        }

        .question .q_content .icon_active_check {
            width: 20px;
            height: 20px;
            cursor: pointer;
            border: solid 1px #aaaaaa;
            background: url("/dist/img/duigouCheck.png") -1px center no-repeat;
            position: absolute;
            top: 6px;
            left: 8px;
        }

        .question .q_content .q_option_ul > li .option_title {
            /*padding: 5px 10px 5px 5px;*/
            font-size: 14px;
            line-height: 1.43;
            min-height: 20px;
            word-wrap: break-word;
        }

        .questionNum {
            font-size: 14px;
            padding-top: 3px;
            width: 20px;
            display: block;
            float: left;
        }

        .cz {
            position: absolute;
            /*right: 110px;*/
            right: -24px;
            top: 0;
        }

        .cz div {
            float: left;
            width: 70px;
            text-align: center;
            color: #2b669a;
        }

        .cz div:hover {
            box-shadow: 0px 0px 0px #fff;
        }

        .cz .romove {
            color: red;
        }

        .spanQuestionInput {
            font-size: 15px;
            padding-left: 12px;
            padding-top: 8px;
            margin-left: 10px;
            min-width: 80%;
            min-height: 24px;
        }

        .spanOptionInput {
            font-size: 15px;
            padding-left: 6px;
            padding-top: 2px;
            margin-left: 21px;
            min-height: 24px;
            min-width: 100%;
        }

        .content2 {
            padding: 0;
        }

        .questionType {
            position: absolute;
            top: 7px;
            left: -28px;
            font-size: 12px;
        }

        input::-webkit-input-placeholder {
            color: rgb(204, 204, 204);
        }
    </style>
</head>
<body>
<section class="content " id="app">
    <div class="div-td-content-more"><i></i></div>
    <div class="oaLoad">
        <div class="loadGif" id="areaProgress"></div>
    </div>
    <div class="module question question_focus" v-for="(item,i) in info.questionList">
        <div class="q_content_wrap">
            <div class="q_content">
                <div class="q_title_wrap">
                    <div class="questionType">
                        <span v-if="item.type==0">(单选)</span>
                    </div>
                    <div class="q_seq">{{i+1}}、</div>
                    <div class="content_editable editable_focus lookTitle">
                        <input type="text" class="aa q_title"
                               style="width: 80%;border: none;border-bottom: 1px solid #cbcbcd;"
                               placeholder="请编辑题目"
                               v-if="pageType=='edit'"
                               v-model="item.content">
                        <div v-else class="spanQuestionInput">{{item.content}}</div>
                    </div>
                    <div class="cz">
                        <!-- <div class="btn add" @click="addRow(i,0)" v-if="pageType=='edit'" style="color: #2a8cec;">新增单选
                         </div>-->
                        <div class="btn add" @click="addRow(i,1)" v-if="pageType=='edit'" style="color: #2a8cec;">新增
                        </div>
                        <div class="btn romove" @click="delRow(i)" v-if="pageType=='edit'">删除</div>
                    </div>
                </div>

                <div class="q_option_list" v-if="item.type==0">
                    <i :class="item.tf&&item.tf==1?'examT':''"></i>
                    <i :class="item.tf==0?'examF':''"></i>
                    <ul class="q_option_ul ui-sortable" style="padding-top: 10px;padding-left: 0px;">
                        <li class="option_item" v-for="(item2,j) in item.optionList">
                            <div class="option_title_wrap">
                                <div class="content_editable ui-sortable-handle">
                                    <i :class="item2.type == 1?'icon_wj icon_active_radio':'icon_wj icon_radio'"
                                       v-if="pageType=='edit'"
                                       @click="checkOne(i,j)"></i>
                                    <i :class="item2.type == 1?'icon_wj icon_active_radio':'icon_wj icon_radio'"
                                       v-else></i>
                                    <span class="questionNum">{{changeNum(j)}}、</span>
                                    <input type="text" class="aa option_title" v-if="pageType=='edit'"
                                           style="width: 60%;margin-left: 5px;border: none;border-bottom: 1px solid #cbcbcd;"
                                           v-model="item2.content">
                                    <div v-else
                                         class="spanOptionInput">{{item2.content}}
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="q_option_list" v-else>
                    <i :class="item.tf&&item.tf==1?'examT':''"></i>
                    <i :class="item.tf==0?'examF':''"></i>
                    <ul class="q_option_ul ui-sortable" style="padding-top: 10px;padding-left: 0px;">
                        <li class="option_item" v-for="(item2,j) in item.optionList">
                            <div class="option_title_wrap">
                                <div class="content_editable ui-sortable-handle">
                                    <i :class="item2.type == 1?'icon_wj icon_active_check':'icon_wj icon_check'"
                                       v-if="pageType=='edit'"
                                       @click="checkBox(i,j)"></i>
                                    <i :class="item2.type == 1?'icon_wj icon_active_check':'icon_wj icon_check'"
                                       v-else></i>
                                    <span class="questionNum">{{changeNum(j)}}、</span>
                                    <input type="text" class="aa option_title" v-if="pageType=='edit'"
                                           style="width: 60%;margin-left: 5px;border: none;border-bottom: 1px solid #cbcbcd;"
                                           v-model="item2.content">
                                    <div v-else
                                         class="spanOptionInput">{{item2.content}}
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

    </div>
    <div style="height:30px;line-height:30px;text-align: center;z-index:999;padding-top:5px;margin-bottom: 15px">
        <input type="button" value="预览" @click="see()" v-if="pageType=='edit'" class="btn oaBtn btn-sm"
               style="margin-top:5px;">
        <input type="button" value="返回" @click="goBack()" v-if="pageType=='look'&&goback==1" class="btn oaBtn btn-sm"
               style="margin-top:5px;">
        <!--<input type="button" value="返回" @click="goBackToDetail()" v-if="pageType=='look'&&goback==0"-->
        <!--class="btn oaBtn btn-sm"-->
        <!--style="margin-top:5px;">-->
        <input type="button" value="保存" @click="save()" v-if="pageType=='edit'" class="btn oaBtn btn-sm"
               style="margin-top:5px;">
    </div>
</section>
<!--JQ-->
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=7e54a132"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=558d0414"></script>

<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script src="/dist/plugins/select2/select2.full.min.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script src="/dist/plugins/fixedTable/fixed-table.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            pageType: $.wyui.page.urlParams.pageType ? $.wyui.page.urlParams.pageType : 'look',//页面类型
            goback: $.wyui.page.urlParams.goback,
            info: {
                id: $.wyui.page.urlParams.mainId ? $.wyui.page.urlParams.mainId : '',
                questionList: [
                    {
                        "content": "",
                        "fraction": 5,
                        "type": 0,
                        "optionList": [
                            {"content": "", "type": "0"},
                            {"content": "", "type": "0"},
                            {"content": "", "type": "0"},
                            {"content": "", "type": "0"}
                        ]
                    }, {
                        "content": "",
                        "fraction": 5,
                        "type": 0,
                        "optionList": [
                            {"content": "", "type": "0"},
                            {"content": "", "type": "0"},
                            {"content": "", "type": "0"},
                            {"content": "", "type": "0"}
                        ]
                    }

                ]
            }
        },
        methods: {
            changeNum: function (num) {
                var letter = 1;
                switch (num) {
                    case 0:
                        letter = 'A';
                        break;
                    case 1:
                        letter = 'B';
                        break;
                    case 2:
                        letter = 'C';
                        break;
                    case 3:
                        letter = 'D';
                        break;
                    default :
                        break;
                }
                return letter
            },
            addRow: function (i, j) {
                var that = this;
                var question = {
                    "content": "",
                    "fraction": 5,
                    "type": j,
                    "optionList": [
                        {"content": "", "type": "0"},
                        {"content": "", "type": "0"},
                        {"content": "", "type": "0"},
                        {"content": "", "type": "0"}
                    ]
                }
                this.info.questionList.splice(i + 1, 0, question);
            },
            delRow: function (i) {
                var that = this;
                if (that.info.questionList && that.info.questionList.length > 1) {
                    top.$.alert({
                        win: this,
                        height: 180,
                        width: 300,
                        icon: '3', //1成功 2失败 3提示 不穿代表无图标
                        title: '确认删除?',

                        blankclose: true,//点击空白是否可关闭
                        ok: "确定",//是否显示确认按钮,
                        okCallback: function (em, opts) {
                            that.info.questionList.splice(i, 1);
                            //确认按钮回调
                            em.remove()
                            opts.close && opts.close()
                        },
                        cancel: "取消",
                        cancelCallback: function (em, opts) {
                            em.remove()
                            opts.close && opts.close()
                        }
                    })
                } else {
                    top.$.alert({
                        win: this,
                        height: 180,
                        width: 300,
                        icon: '3', //1成功 2失败 3提示 不穿代表无图标
                        title: '请保留最少一道题目',
                        content: '',

                        blankclose: true,//点击空白是否可关闭
                        ok: "确定",//是否显示确认按钮,
                    })
                }
            },
            checkOne: function (i, j) {
                console.log(i, j)
                for (var z = 0; z < this.info.questionList[i].optionList.length; z++) {
                    if (z != j) {
                        console.log(z)
                        this.info.questionList[i].optionList[z].type = "0"
                    } else {
                        if (this.info.questionList[i].optionList[z].type == "1") {
                            this.info.questionList[i].optionList[z].type = "0"
                        } else {
                            this.info.questionList[i].optionList[z].type = "1"
                        }
                    }
                }
                console.log(this.info.questionList)
            },
            checkBox: function (i, j) {
                if (this.info.questionList[i].optionList[j].type == "1") {
                    this.info.questionList[i].optionList[j].type = "0"
                } else {
                    this.info.questionList[i].optionList[j].type = "1"
                }
            },
            caseABCD: function (sortNo) {
                var rr = '';
                switch (sortNo) {
                    case 0:
                    case "0":
                        rr = 'A';
                        break;
                    case 1:
                    case "1":
                        rr = 'B';
                        break;
                    case 2:
                    case "2":
                        rr = 'C';
                        break;
                    case 3:
                    case "3":
                        rr = 'D';
                        break;
                    default :
                        rr = '';
                        break;
                }
                return rr;

            },
            save: function () {
                var that = this;
                for (var i = 0; i < that.info.questionList.length; i++) {
                    var flag = true;
                    if (that.info.questionList[i].content == '') {
                        top.$.alert({
                            win: this,
                            height: 180,
                            width: 350,
                            icon: '3', //1成功 2失败 3提示 不穿代表无图标
                            title: "请填写第" + (i + 1) + "道题题目名称",
                            content: '',

                            blankclose: true,//点击空白是否可关闭
                            ok: "确定"
                        })
                        return false;
                    }
                    for (var j = 0; j < that.info.questionList[i].optionList.length; j++) {
                        if (that.info.questionList[i].optionList[j].content == '') {
                            top.$.alert({
                                win: this,
                                height: 180,
                                width: 350,
                                icon: '3', //1成功 2失败 3提示 不穿代表无图标
                                title: "请填写第" + (i + 1) + "道题" + that.caseABCD(j) + "选项内容",
                                content: '',

                                blankclose: true,//点击空白是否可关闭
                                ok: "确定"
                            })
                            return false
                        }
                        if (that.info.questionList[i].optionList[j].type == '1') {
                            flag = false;
                        }
                    }
                    if (flag) {
                        top.$.alert({
                            win: this,
                            height: 180,
                            width: 300,
                            icon: '3', //1成功 2失败 3提示 不穿代表无图标
                            title: "请勾选第 " + (i + 1) + " 道题答案",
                            content: '',

                            blankclose: true,//点击空白是否可关闭
                            ok: "确定"
                        })
                        return
                    }
                }
                $.wyui.postLoadMethod(urlConfig.exam.saveExam, trimRN(that.info), function (data) {
                    top.$.alert({
                        win: this,
                        height: 180,
                        width: 300,
                        icon: '1', //1成功 2失败 3提示 不穿代表无图标
                        title: "保存成功",
                        content: '',

                        blankclose: true,//点击空白是否可关闭
                        cancel: "确定",
                        cancelCallback: function (em, opts) {
                            top.closeTabByPageId("xzpx");
                            top.addTabs({
                                id: 'xzpx',
                                title: '新增培训',
                                close: true,
                                url: 'exam/tempExamDetail.html?isAdd=0&id=' + that.info.id + '&pageType=' + that.pageType
                            });
                            top.closeTabByPageId("xzpxst");
                            em.remove()
                            opts.close && opts.close()
                        }
                    })
                }, false, false)
            },
            see: function () {
                var that = this;
                $.wyui.postLoadMethod(urlConfig.exam.saveExam, trimRN(that.info), function (data) {
                    console.log(data)
                    top.$.dialog({
                        content: 'url:/page/exam/preview.html?mainId=' + that.info.id + '&pageType=' + 'look' + '&goback=' + 0,
                        //title: '预览详情',
                        title: '',
                        width: 404,
                        height: 570,
                        max: true,
                        min: true,
                        lock: true,
                    });
                }, false, false)
            },
            goBack: function () {
                this.pageType = 'edit'
                $('.aa').attr("readonly", false);
                var controls = $(".aa");
                console.log(controls)
                for (var i = 0; i < controls.length; i++) {
                    $('.aa')[i].style.border = "";
                }

            },
            goBackToDetail: function () {
                var that = this;
                top.closeTabByPageId("xzpx");
                top.addTabs({
                    id: 'xzpx',
                    title: '新增培训',
                    close: true,
                    url: 'exam/tempExamDetail.html?isAdd=0&id=' + that.info.id + '&pageType=edit'
                });
                top.closeTabByPageId("xzpxst");
            }
        },
        mounted: function () {
            var that = this;
            var pageType = $.wyui.page.urlParams.pageType ? $.wyui.page.urlParams.pageType : 'look';//页面类型
            console.log($.wyui.page.urlParams)
            if ($.wyui.page.urlParams.readResult && $.wyui.page.urlParams.readResult == 'readResult') {
                $.wyui.postLoadMethod(urlConfig.exam.getExamResultForUser, {
                    id: that.info.id,
                    userId: getCurrentUser().id
                }, function (data) {
                    console.log(data)
                    that.info = data.main;
                }, false, true);
            } else {
                $.wyui.postLoadMethod(urlConfig.exam.getExamDetailByMainId, {id: that.info.id}, function (data) {
                    console.log(data)
                    that.info = data.main;
                    if (that.info.questionList && that.info.questionList.length == 0) {
                        that.addRow(-1, 1);
                        that.addRow(0, 1);
                    }
                }, false, true);
            }
            if ($.wyui.page.urlParams.ifr) {
                $("#app").addClass("content2")
            }

        }
    })
</script>
</body>
</html>